
<!--{include file="common:head" /}-->
{include file="common:head" /}
<style type="text/css">
    .swiper-button-prev:after, .swiper-button-next:after{
        font-size: 12px;
        font-weight: bold;
        color:#fff;
    }
    .swiper-container {
        width: 100%;
        /* height: 147px; */
        margin-left: auto;
        margin-right: auto;
    }

    .swiper-slide {
        background-size: cover;
        background-position: center;
    }

    .gallery-top {
        height: 80%;
        width: 100%;
    }

    .gallery-thumbs {
        height: 50px;
        box-sizing: border-box;
        padding: 10px 0;
        margin-top: -50px;
    }

    .gallery-thumbs .swiper-slide {
        height: 100%;
        opacity: 1;
        border: 5px solid transparent;
    }

    .gallery-thumbs .swiper-slide-thumb-active {
        opacity: 1;
        border: 2px solid #ff9927;
    }
</style>

<body>

{include file="common:header" /}
<div class="index-content">
    <!-- 轮播图 -->
    <div class="swiper-container gallery-top" style="height:31%;">
        <div class="swiper-wrapper">
            {volist name="banner" id = "item"}
            <div class="swiper-slide" style="background-image:url({$item.img});background-size: 100%;"></div>
            {/volist}

        </div>
        <!-- Add Arrows -->
        <div class="swiper-button-next swiper-button-white"></div>
        <div class="swiper-button-prev swiper-button-white"></div>
    </div>
<!--    <div class="swiper-container gallery-thumbs">-->
<!--        <div class="swiper-wrapper">-->

<!--            {volist name="banner" id = "item"}-->
<!--            <div class="swiper-slide" style="background-image:url({$item.img});background-size: 100% 100%;"></div>-->
<!--            {/volist}-->

<!--        </div>-->
<!--    </div>-->
    <div class="all-content padd16">
        <div class="all-title2">优惠咨询</div>
        <div class="discount-all clearfix">
            {volist name="list" id = "item" }
            <div class="discount-list" onclick="openwin('info?id={$item.id}')">
                <div class="img-box">
                    <img src="{$item.image}" >
                </div>
                <h3 class="twoline">{$item.title}</h3>
            </div>
            {/volist}

        </div>
        {include file="common:footer" /}

        {include file="common:telphone" /}
</div>
<script type="text/javascript" src="__STATIC__/move/js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="__STATIC__/move/js/swiper.min.js"></script>
<script type="text/javascript" src="__STATIC__/index/js/common.js"></script>
<script type="text/javascript">
    var galleryThumbs = new Swiper('.gallery-thumbs', {
        spaceBetween: 10,
        slidesPerView: 4,
        loop: true,
        freeMode: true,
        loopedSlides: 5, //looped slides should be the same
        watchSlidesVisibility: true,
        watchSlidesProgress: true,
    });
    var galleryTop = new Swiper('.gallery-top', {
        spaceBetween: 10,
        loop: true,
        loopedSlides: 5, //looped slides should be the same
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        thumbs: {
            swiper: galleryThumbs,
        },
    });
</script>
</body>
</html>